<template>
  <div>
    <el-row>
      <el-col :span="20">
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item>
            <el-select clearable v-model="formSearch.semester" placeholder="请选择学期">
              <el-option 
                v-for="item in semesterOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select clearable v-model="formSearch.course_type" placeholder="请选择课程类型">
              <el-option label="必修课" value="1"></el-option>
              <el-option label="选修课" value="2"></el-option>
              <el-option label="公共课" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select clearable v-model="formSearch.teaching_method" placeholder="请选择上课方式">
              <el-option label="线下授课" value="1"></el-option>
              <el-option label="线上授课" value="2"></el-option>
              <el-option label="混合授课" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input clearable v-model="formSearch.keyword" placeholder="请输入课程名称/代码/教师"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="toSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" style="text-align: right;">
        <el-button type="primary" @click="handleAddCourse">新增课程</el-button>
      </el-col>
    </el-row>
    
    <!-- 课程列表表格 -->
    <div class="table">
      <el-table :data="filteredCourseData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="course_code" label="课程代码" width="120" align="center"></el-table-column>
        <el-table-column prop="course_name" label="课程名称" width="200"></el-table-column>
        <el-table-column prop="teacher_name" label="任课老师" width="120" align="center"></el-table-column>
        <el-table-column prop="credit" label="学分" width="80" align="center"></el-table-column>
        <el-table-column prop="teaching_method" label="上课方式" width="120" align="center">
          <template v-slot="scope">
            <el-tag :type="getMethodTagType(scope.row.teaching_method)">
              {{ formatTeachingMethod(scope.row.teaching_method) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="assessment_method" label="考核方式" width="120" align="center">
          <template v-slot="scope">
            <el-tag :type="getAssessmentTagType(scope.row.assessment_method)">
              {{ formatAssessmentMethod(scope.row.assessment_method) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="class_time" label="上课时间" width="180" align="center"></el-table-column>
        <el-table-column prop="class_location" label="上课地点" width="120" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template v-slot="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 新增/编辑课程对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="courseForm" :rules="rules" ref="courseForm" label-width="100px">
        <el-form-item label="课程代码" prop="course_code">
          <el-input v-model="courseForm.course_code"></el-input>
        </el-form-item>
        <el-form-item label="课程名称" prop="course_name">
          <el-input v-model="courseForm.course_name"></el-input>
        </el-form-item>
        <el-form-item label="任课老师" prop="teacher_name">
          <el-input v-model="courseForm.teacher_name"></el-input>
        </el-form-item>
        <el-form-item label="学分" prop="credit">
          <el-input-number v-model="courseForm.credit" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="上课方式" prop="teaching_method">
          <el-select v-model="courseForm.teaching_method" placeholder="请选择上课方式" style="width: 100%">
            <el-option label="线下授课" value="1"></el-option>
            <el-option label="线上授课" value="2"></el-option>
            <el-option label="混合授课" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考核方式" prop="assessment_method">
          <el-select v-model="courseForm.assessment_method" placeholder="请选择考核方式" style="width: 100%">
            <el-option label="考试" value="1"></el-option>
            <el-option label="考查" value="2"></el-option>
            <el-option label="论文" value="3"></el-option>
            <el-option label="作品" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课时间" prop="class_time">
          <el-input v-model="courseForm.class_time"></el-input>
        </el-form-item>
        <el-form-item label="上课地点" prop="class_location">
          <el-input v-model="courseForm.class_location"></el-input>
        </el-form-item>
        <el-form-item label="课程描述" prop="description">
          <el-input type="textarea" v-model="courseForm.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索表单
      formSearch: {
        semester: '',
        course_type: '',
        teaching_method: '',
        keyword: ''
      },
      // 学期选项
      semesterOptions: [
        { value: '2023-2024-1', label: '2023-2024学年第一学期' },
        { value: '2023-2024-2', label: '2023-2024学年第二学期' },
        { value: '2024-2025-1', label: '2024-2025学年第一学期' }
      ],
      // 静态课程数据
      courseData: [
        {
          course_id: '1',
          course_code: 'CS101',
          course_name: '计算机科学导论',
          teacher_name: '张教授',
          credit: 3,
          teaching_method: '1',
          assessment_method: '1',
          class_time: '周一 1-2节',
          class_location: '教学楼A201',
          description: '计算机科学基础课程'
        },
        {
          course_id: '2',
          course_code: 'MA202',
          course_name: '高等数学',
          teacher_name: '李教授',
          credit: 4,
          teaching_method: '1',
          assessment_method: '2',
          class_time: '周二 3-4节',
          class_location: '教学楼B305',
          description: '高等数学基础课程'
        },
        {
          course_id: '3',
          course_code: 'EN303',
          course_name: '英语写作',
          teacher_name: '王老师',
          credit: 2,
          teaching_method: '3',
          assessment_method: '3',
          class_time: '周三 5-6节',
          class_location: '在线',
          description: '英语写作技巧训练'
        },
        {
          course_id: '4',
          course_code: 'AR404',
          course_name: '艺术设计',
          teacher_name: '赵老师',
          credit: 2,
          teaching_method: '2',
          assessment_method: '4',
          class_time: '周四 7-8节',
          class_location: '艺术楼101',
          description: '艺术设计基础'
        },
        {
          course_id: '5',
          course_code: 'PH505',
          course_name: '物理学',
          teacher_name: '刘教授',
          credit: 3,
          teaching_method: '1',
          assessment_method: '1',
          class_time: '周五 1-2节',
          class_location: '实验楼302',
          description: '大学物理课程'
        },
        {
          course_id: '6',
          course_code: 'XL606',
          course_name: '政治学',
          teacher_name: '薛教授',
          credit: 3,
          teaching_method: '1',
          assessment_method: '1',
          class_time: '周五 5-6节',
          class_location: '主楼302',
          description: '形势与政策'
        },{
          course_id: '7',
          course_code: 'ZZ707',
          course_name: '心理学',
          teacher_name: '王教授',
          credit: 3,
          teaching_method: '1',
          assessment_method: '1',
          class_time: '周五 7-8节',
          class_location: '实验楼422',
          description: '大学生心理健康'
        }
      ],
      // 对话框控制
      dialogVisible: false,
      dialogTitle: '新增课程',
      // 课程表单
      courseForm: {
        course_id: '',
        course_code: '',
        course_name: '',
        teacher_name: '',
        credit: 2,
        teaching_method: '1',
        assessment_method: '1',
        class_time: '',
        class_location: '',
        description: ''
      },
      // 表单验证规则
      rules: {
        course_code: [
          { required: true, message: '请输入课程代码', trigger: 'blur' }
        ],
        course_name: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        teacher_name: [
          { required: true, message: '请输入任课老师', trigger: 'blur' }
        ],
        credit: [
          { required: true, message: '请输入学分', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 过滤后的课程数据
    filteredCourseData() {
      let data = [...this.courseData]
      
      // 按学期筛选
      if (this.formSearch.semester) {
        // 这里只是示例，实际可以根据需要添加筛选逻辑
        data = data.filter(item => true)
      }
      
      // 按课程类型筛选
      if (this.formSearch.course_type) {
        // 这里只是示例，实际可以根据需要添加筛选逻辑
        data = data.filter(item => true)
      }
      
      // 按上课方式筛选
      if (this.formSearch.teaching_method) {
        data = data.filter(item => item.teaching_method === this.formSearch.teaching_method)
      }
      
      // 按关键词筛选
      if (this.formSearch.keyword) {
        const keyword = this.formSearch.keyword.toLowerCase()
        data = data.filter(item => 
          item.course_code.toLowerCase().includes(keyword) ||
          item.course_name.toLowerCase().includes(keyword) ||
          item.teacher_name.toLowerCase().includes(keyword)
        )
      }
      
      return data
    }
  },
  methods: {
    // 搜索课程
    toSearch() {
      // 计算属性会自动更新，这里不需要额外操作
    },
    // 新增课程
    handleAddCourse() {
      this.dialogTitle = '新增课程'
      this.courseForm = {
        course_id: '',
        course_code: '',
        course_name: '',
        teacher_name: '',
        credit: 2,
        teaching_method: '1',
        assessment_method: '1',
        class_time: '',
        class_location: '',
        description: ''
      }
      this.dialogVisible = true
    },
    // 编辑课程
    handleEdit(row) {
      this.dialogTitle = '编辑课程'
      this.courseForm = { ...row }
      this.dialogVisible = true
    },
    // 删除课程
    handleDelete(index) {
      this.$confirm('确认删除该课程吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.courseData.splice(index, 1)
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 提交表单
    submitForm() {
      this.$refs.courseForm.validate((valid) => {
        if (valid) {
          if (this.courseForm.course_id) {
            // 编辑 - 找到对应课程并更新
            const index = this.courseData.findIndex(item => item.course_id === this.courseForm.course_id)
            if (index !== -1) {
              this.courseData.splice(index, 1, { ...this.courseForm })
              this.$message.success('更新成功')
            }
          } else {
            // 新增 - 生成新ID并添加到数组
            this.courseForm.course_id = Date.now().toString()
            this.courseData.unshift({ ...this.courseForm })
            this.$message.success('新增成功')
          }
          this.dialogVisible = false
        } else {
          return false
        }
      })
    },
    // 格式化上课方式
    formatTeachingMethod(method) {
      const methodMap = {
        '1': '线下授课',
        '2': '线上授课',
        '3': '混合授课'
      }
      return methodMap[method] || method
    },
    // 格式化考核方式
    formatAssessmentMethod(method) {
      const methodMap = {
        '1': '考试',
        '2': '考查',
        '3': '论文',
        '4': '作品'
      }
      return methodMap[method] || method
    },
    // 获取上课方式标签类型
    getMethodTagType(method) {
      const methodMap = {
        '1': 'success', // 线下授课
        '2': 'info',    // 线上授课
        '3': 'warning'  // 混合授课
      }
      return methodMap[method] || ''
    },
    // 获取考核方式标签类型
    getAssessmentTagType(method) {
      const methodMap = {
        '1': 'danger',  // 考试
        '2': 'warning', // 考查
        '3': 'success', // 论文
        '4': 'primary'  // 作品
      }
      return methodMap[method] || ''
    }
  },
  created() {
    // 默认选择当前学期
    this.formSearch.semester = '2023-2024-1'
  }
}
</script>

<style lang="scss" scoped>
.demo-form-inline {
  padding: 20px 0;
}

.table {
  background: #fff;
  padding: 20px;
}

.el-tag {
  margin: 2px;
}
</style>